<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>less例子</title>
    <link rel="stylesheet" href="css/9-例子.css">
</head>
<body>
<section>
    <div class="box">
        <div class="title">
            <h3>众筹</h3>
            <a href="#"><img src="images/ico_01.gif" alt=""></a>
        </div>
        <div class="imgbox">
            <a href="#"><img src="images/img_01.gif" alt=""></a>
            <h4><a href="#">迷你无人机-小到不可思议</a></h4>
            <p>年轻人的新玩具</p>
        </div>
        <ul>
            <li>
                <a href="#"><img src="images/img_02.jpg" alt=""></a>
                <a href="#" class="title">智能折叠车</a>
            </li>
            <li>
                <a href="#"><img src="images/img_03.jpg" alt=""></a>
                <a href="#" class="title">防水智能插座</a>
            </li>
        </ul>
        <p class="link1">
            <a href="#">科技控</a><a href="#">创意设计</a><a href="#">最新周边</a>
        </p>
        <p class="link2">
            <a href="#">[ 明星同款 ]</a>
            <span>全球名表低价</span>
        </p>
    </div>
    <div class="box">
        <div class="title">
            <h3>众筹</h3>
            <a href="#"><img src="images/ico_01.gif" alt=""></a>
        </div>
        <div class="imgbox">
            <a href="#"><img src="images/img_01.gif" alt=""></a>
            <h4><a href="#">迷你无人机-小到不可思议</a></h4>
            <p>年轻人的新玩具</p>
        </div>
        <ul>
            <li>
                <a href="#"><img src="images/img_02.jpg" alt=""></a>
                <a href="#" class="title">智能折叠车</a>
            </li>
            <li>
                <a href="#"><img src="images/img_03.jpg" alt=""></a>
                <a href="#" class="title">防水智能插座</a>
            </li>
        </ul>
        <p class="link1">
            <a href="#">科技控</a><a href="#">创意设计</a><a href="#">最新周边</a>
        </p>
        <p class="link2">
            <a href="#">[ 明星同款 ]</a>
            <span>全球名表低价</span>
        </p>
    </div>
    <div class="box">
        <div class="title">
            <h3>众筹</h3>
            <a href="#"><img src="images/ico_01.gif" alt=""></a>
        </div>
        <div class="imgbox">
            <a href="#"><img src="images/img_01.gif" alt=""></a>
            <h4><a href="#">迷你无人机-小到不可思议</a></h4>
            <p>年轻人的新玩具</p>
        </div>
        <ul>
            <li>
                <a href="#"><img src="images/img_02.jpg" alt=""></a>
                <a href="#" class="title">智能折叠车</a>
            </li>
            <li>
                <a href="#"><img src="images/img_03.jpg" alt=""></a>
                <a href="#" class="title">防水智能插座</a>
            </li>
        </ul>
        <p class="link1">
            <a href="#">科技控</a><a href="#">创意设计</a><a href="#">最新周边</a>
        </p>
        <p class="link2">
            <a href="#">[ 明星同款 ]</a>
            <span>全球名表低价</span>
        </p>
    </div>
    <div class="box">
        <div class="title">
            <h3>众筹</h3>
            <a href="#"><img src="images/ico_01.gif" alt=""></a>
        </div>
        <div class="imgbox">
            <a href="#"><img src="images/img_01.gif" alt=""></a>
            <h4><a href="#">迷你无人机-小到不可思议</a></h4>
            <p>年轻人的新玩具</p>
        </div>
        <ul>
            <li>
                <a href="#"><img src="images/img_02.jpg" alt=""></a>
                <a href="#" class="title">智能折叠车</a>
            </li>
            <li>
                <a href="#"><img src="images/img_03.jpg" alt=""></a>
                <a href="#" class="title">防水智能插座</a>
            </li>
        </ul>
        <p class="link1">
            <a href="#">科技控</a><a href="#">创意设计</a><a href="#">最新周边</a>
        </p>
        <p class="link2">
            <a href="#">[ 明星同款 ]</a>
            <span>全球名表低价</span>
        </p>
    </div>
    <div class="box">
        <div class="title">
            <h3>众筹</h3>
            <a href="#"><img src="images/ico_01.gif" alt=""></a>
        </div>
        <div class="imgbox">
            <a href="#"><img src="images/img_01.gif" alt=""></a>
            <h4><a href="#">迷你无人机-小到不可思议</a></h4>
            <p>年轻人的新玩具</p>
        </div>
        <ul>
            <li>
                <a href="#"><img src="images/img_02.jpg" alt=""></a>
                <a href="#" class="title">智能折叠车</a>
            </li>
            <li>
                <a href="#"><img src="images/img_03.jpg" alt=""></a>
                <a href="#" class="title">防水智能插座</a>
            </li>
        </ul>
        <p class="link1">
            <a href="#">科技控</a><a href="#">创意设计</a><a href="#">最新周边</a>
        </p>
        <p class="link2">
            <a href="#">[ 明星同款 ]</a>
            <span>全球名表低价</span>
        </p>
    </div>
    <div class="box">
        <div class="title">
            <h3>众筹</h3>
            <a href="#"><img src="images/ico_01.gif" alt=""></a>
        </div>
        <div class="imgbox">
            <a href="#"><img src="images/img_01.gif" alt=""></a>
            <h4><a href="#">迷你无人机-小到不可思议</a></h4>
            <p>年轻人的新玩具</p>
        </div>
        <div class="hot">
            <p><span>巴厘岛</span><span>5天4晚2699</span></p>
            <a href="#"><img src="images/img_04.jpg" alt=""></a>
        </div>
        <p class="link1">
            <a href="#">科技控</a><a href="#">创意设计</a><a href="#">最新周边</a>
        </p>
        <p class="link2">
            <a href="#">[ 明星同款 ]</a>
            <span>全球名表低价</span>
        </p>
    </div>
</section>
</body>
</html>